import { defineComponent } from 'vue';
import { BasicTable, useTable } from '/@/components/Table';
import { getViolationListApi, deleteViolationApi } from './service';
import ActionModal from './modules/ActionModal';
import { useModal } from '@/components/Modal';
import { createTableAction } from '/@/components/Table/src/hooks/createTableAction';
import { useMessage } from '/@/hooks/web/useMessage';
import dayjs from 'dayjs';
export const Category = [
  { label: '恶意预约', value: '1' },
  { label: '乱扔垃圾', value: '2' },
  { label: '不讲文明', value: '3' },
  { label: '带零食进自习室', value: '4' },
];
export default defineComponent({
  name: 'Violation',
  setup() {
    const {
      createMessage: { success },
    } = useMessage();
    const [registerTable, { reload }] = useTable({
      title: '违规记录',
      api: getViolationListApi,
      fetchSetting: {
        listField: 'data.records',
      },
      columns: [
        {
          dataIndex: 'Category',
          title: '违规类型',
          customRender: ({ text }) => {
            return Category.find((i) => +i.value === +text)?.label;
          },
        },
        {
          dataIndex: 'UserName',
          title: '违规用户',
        },
        {
          dataIndex: 'ViolationTime',
          title: '违规时间',
        },
        {
          dataIndex: 'Description',
          title: '违规描述',
        },
        {
          dataIndex: 'CreateTime',
          title: '创建时间',
          customRender: ({ text }) => {
            return dayjs(text).format('YYYY-MM-DD HH:mm:ss');
          },
        },
      ],
      showTableSetting: true,
      bordered: true,
      useSearchForm: true,
      formConfig: {
        labelWidth: 80,
        baseColProps: { span: 5 },
        schemas: [
          {
            field: 'Category',
            label: '违规类型',
            component: 'Select',
            componentProps: {
              options: Category,
            },
          },
        ],
      },
      actionColumn: {
        width: 130,
        title: '操作',
        fixed: 'right',
        customRender: ({ record }) =>
          createTableAction([
            {
              label: '编辑',
              icon: 'ant-design:edit-outlined',
              onClick: () => {
                openModal(true, { record, type: 'edit' });
              },
            },
            {
              label: '删除',
              danger: true,
              icon: 'ant-design:delete-outlined',
              popConfirm: {
                title: '确定删除？',
                confirm: async () => {
                  await deleteViolationApi(record.ViolationID);
                  success('删除成功');
                  reload();
                },
              },
            },
          ]),
      },
    });

    const [registerModal, { openModal }] = useModal();

    const tableTopAction = createTableAction(
      [
        {
          label: '新增违规',
          icon: 'ant-design:plus-outlined',
          onClick: () => openModal(true, { type: 'add' }),
        },
      ],
      { type: 'top', outside: true },
    );
    return () => (
      <div class="p-4">
        <BasicTable onRegister={registerTable}>
          {{
            headerTop: () => tableTopAction,
          }}
        </BasicTable>
        <ActionModal onRegister={registerModal} onReload={reload} />
      </div>
    );
  },
});
